<template>
  <div class="detail">
    <van-nav-bar
      :title="houseInfo.community"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="img-box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in houseInfo.houseImg"
          :key="index"
        >
          <img :src="'http://liufusong.top:8080' + item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 描述 -->
    <div class="desc">
      <div class="title">
        <p>{{ houseInfo.title }}</p>
        <span v-for="(item, index) in houseInfo.tags" :key="index">
          {{ item }}
        </span>
      </div>
      <div class="mess">
        <div class="rent">
          <p>{{ houseInfo.price }} /月</p>
          <span>租金</span>
        </div>
        <div class="rent">
          <p>{{ houseInfo.roomType }}</p>
          <span>房屋</span>
        </div>
        <div class="rent">
          <p>{{ houseInfo.size }} /月</p>
          <span>面积</span>
        </div>
      </div>
      <div class="det">
        <van-grid :border="false" direction="horizontal" :column-num="2">
          <van-grid-item>
            <template>
              <div>装修: <span>精装</span></div>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template>
              <div>
                朝向:
                <span
                  v-for="(item, index) in houseInfo.oriented"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template>
              <div>
                楼层: <span>{{ houseInfo.floor }}</span>
              </div>
            </template>
          </van-grid-item>
          <van-grid-item>
            <template>
              <div>类型: <span>普通住宅</span></div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 小区地图 -->
    <div class="map">
      <div class="map-title">小区: 待定</div>
      <div class="map-content"></div>
    </div>
    <!-- 房屋配套 -->
    <div class="houseAbout">
      <div class="about">房屋配套</div>
      <van-grid :gutter="10">
        <van-grid-item
          v-for="(item, index) in houseInfo.supporting"
          :key="index"
          icon="desktop-o"
          :text="item"
        >
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 房屋概况 -->
    <div class="survey">
      <div class="about">房源概况</div>
      <div class="user-detail">
        <van-cell title="王女士">
          <template #extra>
            <van-button plain type="primary" size="mini">发消息</van-button>
          </template>
          <template #icon>
            <van-image
              width="52"
              height="52"
              src="http://liufusong.top:8080/img/avatar.png"
            />
          </template>
          <template #label>
            <van-grid :border="false" direction="horizontal" :column-num="2">
              <van-grid-item icon="passed" text="已认证房主" />
            </van-grid>
          </template>
        </van-cell>
        <div class="info">
          1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
          2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
          3.人车分流，环境优美。
          4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getHouseInfo } from '@/api/house.js'

export default {
  name: 'detail',
  data () {
    return {
      houseInfo: {},
      mess: '暂无数据'
    }
  },
  computed: {
    ...mapState(['user', 'code'])
  },
  created () {
    this.loadHouseInfo()
  },

  methods: {
    async loadHouseInfo () {
      try {
        const res = await getHouseInfo(this.code)
        console.log(res)
        this.houseInfo = res.data.body
      } catch (err) {}
    }
  }
}
</script>

<style scoped lang="less">
.detail {
  .van-nav-bar {
    background-color: #21b97a;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-icon {
      color: #fff;
    }
  }
  .img-box {
    .van-swipe-item {
      height: 6.3rem;
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
  .desc {
    padding: 0.5rem;
    background: #fff;
    .title {
      padding: 0.125rem 0;
      border-bottom: 0.0625rem solid #f5f5f9;
      p {
        margin: 0.0625rem;
        font-weight: 400;
        font-size: 0.4rem;
        color: #333;
      }
      span {
        color: #39becd;
        background: #e1f5f8;
        display: inline-block;
        font-size: 0.15rem;
        border-radius: 0.0375rem;
        padding: 0.05rem 0.125rem;
        margin-right: 0.0625rem;
        line-height: 0.15rem;
      }
    }
    .mess {
      display: flex;
      justify-content: space-around;
      padding: 0.25rem 0;
      border-bottom: 0.0625rem solid #f5f5f9;
      .rent {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          margin: 0.0625rem;
          color: #fa5741;
          font-size: 0.45rem;
          font-weight: bolder;
        }
        span {
          font-size: 0.325rem;
          height: 0.325rem;
          line-height: 0.325rem;
          color: #666;
        }
      }
    }
  }
  .det {
    /deep/.van-grid-item {
      font-size: 0.325rem;
      .van-grid-item__content {
        padding: 0.0625rem;
      }
      div {
        float: left;
        // display: inline-block;
        color: #999;
        padding-right: 0.0625rem;
        line-height: 0.325rem;
        span {
          color: #333;
        }
      }
    }
  }
  // 地图样式
  .map {
    margin-top: 0.25rem;
    background: #fff;
    height: 4.75rem;
    .map-title {
      margin: 0 3%;
      line-height: 1.1rem;
      color: #666;
      font-size: 0.35rem;
    }
    .map-content {
      height: 3.625rem;
      background-color: pink;
    }
  }
  // 房屋配套
  .houseAbout {
    margin-bottom: 0.125rem;
    padding: 0 0.25rem;
    background: #fff;
    font-size: 0.35rem;
    /deep/.about {
      font-weight: 600;
      font-size: 0.375rem;
      margin-bottom: 0.25rem;
      padding: 0.375rem 0;
      border-bottom: 0.025rem solid #cecece;
      /deep/.van-grid-item__content {
        padding: 0 0.0625rem;
      }
    }
  }
  // 房屋概况
  .survey {
    margin: 0.25rem 0;
    padding: 0 0.25rem;
    line-height: 150%;
    background: #fff;
    .about {
      font-weight: 600;
      font-size: 0.375rem;
      margin-bottom: 0.25rem;
      padding: 0.25rem 0;
      border-bottom: 0.025rem solid #cecece;
      /deep/.user-detail {
        margin-bottom: 0.125rem;
        .info {
          padding: 10px 0;
          color: #333;
          font-size: 14px;
        }
        img {
          width: 0.65rem;
          height: 0.65rem;
          margin: 0.125rem 0.125rem 0 0;
        }
        .van-grid-item__content {
          padding: 0;
        }
        .van-cell__title {
          span {
            padding-left: 0.125rem;
          }
        }

      }

    }
  }
}
</style>
